<template>
	<view class="components-theme">
		<view>
			<uni-section title="" subTitle="" type="line" style="margin-bottom: 3px;">
				<view class="box-bg">
					<!--适应手机状态栏的高度-->
					<view class="status_bar"
						style="height: var(--status-bar-height); width: 100%; background-color: #245b9f;">
					</view>
					<uni-nav-bar dark @clickLeft="back" color="#eee" backgroundColor="#245b9f" height="44"
						left-icon="left" title="事故统计" leftText="">
						<block slot="right">
							<view>
								<picker mode="selector" :value="index" :range="range" @change="bindDateChange"
									style="display: inline-block;">
									<view class="uni-input">{{currentYear}}年</view>
									<!-- <view class="uni-input" v-if="">{{year}}年</view> -->
								</picker>
								<u-icon name="arrow-down" color="#fff"
									style="display: inline-block; margin: 5px 5px 5px 5px;"></u-icon>
							</view>
						</block>
					</uni-nav-bar>
				</view>
			</uni-section>
			<view class="uni-list" style="margin-left: 350px;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">

					</view>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu">
			<view class="box">
				<view class="flex-direction">
					<view class="top">
						事故总数
						<text class="txt">
							{{accidentListData.accidentCount}}
							<text class="txtSon">起</text>
						</text>
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					<image class="sg" src="../../../static/images/fenxi/sg.png"> </image>
				</view>
			</view>
			<view class="cu-item txt1">
				<text class="textItem">事故总数：<text class="txtNum">{{accidentListData.accidentCount}}</text>起</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		accidentList
	} from "@/api/accident.js";
	export default {
		data() {
			return {
				chartData: {},
				range: [],
				index: 0,
				// date: new Date().getFullYear()
				currentYear: new Date().getFullYear(), //获取当前年份
				accidentListData: {},
				res1: [13, 3, 23, 1],
				// year: '', //后台传的年份
				opts: {
					tooltipShow: false,
					rotate: false,
					rotateLock: false,
					color: ["#329395", "#8B57C2", "#BA2D26", "#185F9A"],
					padding: [15, 5, 15, 5],
					dataLabel: true,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							ringWidth: 15,
							offsetAngle: 90,
							activeRadius: 12,
							activeOpacity: 0.4,
							labelWidth: 5,
						},
						tooltip: {
							showBox: false,
						},
					},
				},
			};
		},
		onLoad() {
			for (let i = this.currentYear - 60; i <= this.currentYear; i++) {
				this.range.push(i)
			}
			this.range.reverse()
		},
		onReady() {
			this.getAccidentList(this.currentYear);
		},
		methods: {
			bindDateChange(e) {
				console.log("eeee", e)
				console.log(this.range[e.detail.value])
				this.currentYear = this.range[e.detail.value]
				// this.year = this.currentYear
				this.getAccidentList(this.currentYear)
				this.index = e.detail.value

				// console.log("年份", this.year)
			},

			getAccidentList(years) {
				accidentList(years)
					.then((result) => {
						console.log("事故统计", result)
						this.accidentListData = result.data;
						const str = result.data.accidentLevelCount.x.map(
							(item) => {
								return item;
							});

						const str1 = result.data.accidentLevelCount.y.map(
							(item) => {
								return item;
							});

						let res = {
							series: [{
								data: [{
										name: str[0],
										value: Number(str1[0]),
										labelText: str[0] + str1[0],
									},
									{
										name: str[1],
										value: Number(str1[1]),
										labelText: str[1] + str1[1],
									},
									{
										name: str[2],
										value: Number(str1[2]),
										labelText: str[2] + str1[2],
									},
									{
										name: str[3],
										value: Number(str1[3]),
										labelText: str[3] + str1[3],
									},
								],
							}, ],
						};
						this.chartData = JSON.parse(JSON.stringify(res));


					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 自定义菜单点击返回
			back() {
				this.$tab.switchTab("/pages/analyse/index");
				// uni.navigateBack({
				// 	delta: 1
				// })
			}
		},
	};
</script>

<style lang="scss" scoped>
	.components-theme {
		.cu-list {
			border-top: 10rpx solid #8b57c2;
			background-color: white;
			margin-top: 36rpx;

			.box {
				background-color: #fafafa;
				border-bottom: 2rpx solid #e5e5e5;
				text-align: center;

				.top {
					display: inline-block;
					font-size: 28rpx;
					font-weight: 600;
					color: #343434;
					margin-top: 48rpx;
					margin-bottom: 50rpx;

					.txt {
						font-size: 60rpx;
						font-style: italic;
						margin-top: 10rpx;
						margin-left: 22rpx;
						color: #329395;

						.txtSon {
							font-size: 30rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			.box1 {
				.charts-box {
					.sg {
						width: 19%;
						height: 8%;
						position: absolute;
						left: 41%;
						top: 34%;
					}
				}
			}

			.txt1 {
				background-color: #fafafa;
				margin: 34rpx 32rpx;

				.textItem {
					color: #343434;
					font-size: 28rpx;

					.txtNum {
						font-size: 36rpx;
						font-style: italic;
						font-weight: 600;
					}
				}
			}

			.txt2 {
				background-color: #fafafa;
				margin: 34rpx 32rpx;

				.textItem {
					color: #343434;
					font-size: 28rpx;

					.txtNum {
						font-size: 36rpx;
						font-style: italic;
						font-weight: 600;
					}
				}
			}

			.txt3 {
				background-color: #fafafa;
				margin: 34rpx 32rpx;

				.textItem1 {
					color: #343434;
					font-size: 28rpx;

					.txtNum1 {
						font-size: 36rpx;
						font-style: italic;
						font-weight: 600;
					}

					.txtNum2 {
						font-size: 36rpx;
						font-style: italic;
						font-weight: 600;
						margin-left: 80rpx;
					}
				}
			}
		}
	}



	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	// #ifdef APP-PLUS
	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	.box1 {
		.charts-box {
			.sg {
				width: 19%;
				height: 8%;
				position: absolute;
				left: 41%;
				top: 32% !important;
			}
		}
	}

	// #endif


	.u-popup div {
		z-index: 999 !important;
	}
</style>
